<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <style>
    .container {
      margin-top: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <!-- 筛选区域 -->
      <div style="margin-bottom:20px">
        <input autofocus type="text" class="form-control" style="width:200px;display: inline-block;"
        placeholder="输入关键字查询">
        <button class="btn btn-success">查询</button>
      </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>编号</th>
            <th>汽车品牌</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 进行遍历 :key唯一标识规范写法 -->
          <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.brandName}}</td>
            <td>{{item.createTime}}</td>
            <td><a href="#" @click.prevent="delBrand(item.id)">删除</a></td>
          </tr>
          <!-- 如果没有数据，提示“暂无数据” -->
          <tr v-if="list.length===0">
            <td colspan="4" style="text-align:center;">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <!-- 添加品牌 -->
      <div style="margin-top:20px">
        <input v-model="brandName" type="text" class="form-control" style="width:200px;display: inline-block;"
          placeholder="请输入品牌名称">
        <button class="btn btn-primary" @click="addBrand()">添加</button>
      </div>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 列表数据
        list: [
          { id: 1, brandName: '宝马', createTime: new Date() },
          { id: 2, brandName: '奥迪', createTime: new Date() },
          { id: 3, brandName: '奔驰', createTime: new Date() }
        ],
        // 品牌名称
        brandName: ''
      },
      methods: {
        // 删除函数
        delBrand(id) {
          // 确认框
          if (confirm('您是否删除品牌？')) {
            // 1. 根据ID找索引
            const index = this.list.findIndex(item => item.id === id)
            // 2. 根据索引删除
            this.list.splice(index, 1)
          }
        },
        // 添加函数
        addBrand() {
          // 获取输入的内容 this.brandName
          // 判断是否输入内容
          if (!this.brandName.trim()) {
            return alert('请输入品牌名称')
          }
          // 进行添加
          this.list.push({
            // 如果数组没有长度  默认就是1
            // 如果数组有长度 取出最后一条数据的ID累加1即可
            id: this.list.length ? this.list[this.list.length - 1].id + 1 : 1,
            brandName: this.brandName,
            createTime: new Date()
          })
          // 清空输入框
          this.brandName = ''
        }
      }
    })
  </script>
</body>

</html>